<div ng-controller="swarmCtrl" class="clearfix script-content">
    <div class="wrapper-md">
        <div class="panel panel-default">
            <div class="col-md-12 search-box m-b-md" style="float:none;">
                <div class="legend">查询条件</div>
                <div class="search-content">
                    <div class="form-group">
                        <label class="control-label">名称：</label>
                        <input type="name" ng-model="searchByName" class="form-control input-sm" placeholder="" aria-controls="DataTables_Table_3">
                    </div>
                    <div class="form-group">
                        <label class="control-label">主机使用：</label>
                        <select class="form-control" ng-model="hostNum" ng-options="x.site for x in sites">
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">cpu使用：</label>
                        <select class="form-control" ng-model="cpuNum" ng-options="x.site for x in sites">
                             <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>
                <div class="search-btn">
                    <button class="btn btn-info w-xs m-r" ng-click="getData(1)"><i class="fa fa-search"></i> 查询</button>
                    <button class="btn btn-primary w-xs m-r" ng-click="addSwarm()"><i class="fa fa-plus-circle"></i> 新增</button>
                </div>
            </div>

            <div class="list-byc col-sm-8 sp" >
                <ul class="list-unstyled">
                    <li class="list-li" ng-repeat="row in swarmList" ng-if="!isImageData">
                        <div class="col-sm-6 sp" style="padding-right: 15px;">
                            <div class="panel panel-default" style="margin-bottom: 20px;">
                                <div class="panel-heading dfont-back">
                                    <span ng-bind="row.clusterName" style="cursor: pointer;" ng-click="detail(row)"></span>
                                    <div class="operation operation-hw">
                                        <i class="fa fa-bars icon-font" aria-hidden="true"></i>
                                        <div class="operation-box operation-box-hidden">
                                            <div class="operation-box-icon" ng-click="add(row)"><a href="javascript:void(0)">添加主机</a></div>
                                            <div class="operation-box-icon" ng-click="remove(row)"><a href="javascript:void(0)">移除主机</a></div>
                                            <div class="operation-box-icon" ng-click="delete(row.clusterId)"><a href="javascript:void(0)">删除集群</a></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-detail">
                                    <div class="col-sm-12 sp swarm-b">
                                        <div class="col-sm-5 sp text-center sp-left">
                                            <div class="col-sm-12">
                                                <div class="col-sm-6 sp" style="height: 30px;line-height: 30px">
                                                    <span class="sp-zhu">主机</span>
                                                </div>
                                                <div class="col-sm-6 text-left sp" style="height: 30px;line-height: 30px;">
                                                    <span class="net-num" ng-bind="row.clusterHostNum"></span>
                                                </div>
                                            </div>
                                            <div class="col-sm-12">
                                                <div class="col-sm-6 sp" style="height: 20px;line-height: 20px">
                                                    <span class="health-font">健康状态</span>
                                                </div>
                                                <div class="col-sm-6 text-left sp" style="height: 20px;line-height: 20px;">
                                                    <span class="health-p">健康</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-7" style="padding-left: 14px;margin-top: 20px;">
                                            <div class="col-sm-12">
                                                <img src="/statics/img/circleblue.png">&nbsp;&nbsp;<p class="sp-right">运行中</p>&nbsp;&nbsp;&nbsp;&nbsp;<span ng-bind="row.clusterHostOnNum"></span><span>个</span>
                                            </div>
                                            <div class="col-sm-12 swarm-pr">
                                                <img src="/statics/img/circlegrey.png">&nbsp;&nbsp;<p class="sp-right">关机中</p>&nbsp;&nbsp;&nbsp;&nbsp;<span ng-bind="row.clusterHostOffNum"></span><span>个</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!--<div class="col-sm-12" style="height: 30px;">
                                        <span class="app-p" style="line-height: 30px">容器</span>
                                        <img src="/statics/img/swarm-img.png" class="swarm-img" ng-click="showimg($event)">
                                        <img src="/statics/img/swarm-img.png" class="swarm-img" ng-click="hideimg($event)" style="display: none">
                                    </div>
                                    <div class="col-sm-12" style="height: 189px;display: none;">
                                    </div>-->
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="col-md-12" ng-if="isImageData">
                        暂无数据
                        <td class="td-nodata" colspan="10"></td>
                    </li>
                </ul>
                <div class="col-md-12 clearfix">
                    <div class="col-sm-6" style="padding:7px 15px;">
                        <div class="paginationTables_info">总共<span ng-bind="totalCount"></span>条, 每页<span
                                ng-bind="param.rows"></span>条
                        </div>
                    </div>
                    <div class="col-sm-6 text-right">
                        <pagination boundary-links="true" total-items="totalCount" items-per-page="param.rows" max-size="8"
                                    ng-model="param.page" ng-change="getData(param.page)" previous-text="&lsaquo;"
                                    next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 sp panel panel-default">
                <div class="panel-heading">操作历史</div>
                <div class="panel-detail">
                    <div class="col-sm-12 instrument-font" style="min-height: 440px;">
                        <ul class="timeline">
                            <li class="tl-item" ng-repeat="row in eventList" ng-if="!isImageDataEvent">
                                <div class="tl-wrap b-info">
                                    <!--<span class="tl-date">5s ago</span>-->
                                    <div class="tl-content">
                                        {{row.eventDesc}}
                                    </div>
                                    <div class="tl-time">
                                        {{row.eventTime | date:'yyyy-MM-dd HH:mm:ss'}}
                                    </div>
                                </div>
                            </li>
                            <li class="tl-item" ng-if="isImageDataEvent">
                                暂无数据
                                <td class="td-nodata" colspan="10"></td>
                            </li>
                        </ul>
                            <div class="col-sm-12 text-center" style="padding: 0px;">
                                <pagination boundary-links="true" total-items="totalCountEvent" items-per-page="param.rows" max-size="8"
                                            ng-model="param.page" ng-change="getEvent(param.page)" previous-text="&lsaquo;"
                                            next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
                            </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
